<template xmlns="http://www.w3.org/1999/html">
  <img src="../../assets/img/Index/CT.png" style="width: 100%;margin-top: -1%">
  <div style="width: 100%;margin-top: -1%;background: linear-gradient(-56deg, rgba(113,92,252,0.65), rgb(255,255,255));/*渐变颜色*/">
<!--   输入框-->
    <a-space direction="vertical" size="large" style="width: 100%;margin-top:0;top: 40px; z-index:90" >
      <a-input-search :style="{width:'50%'}" style="height: 45px;margin-top: 25px;margin-left: 25%;" v-model="input" @keydown.enter="goToPage"  placeholder="搜索职位、公司" allow-clear>
<!--        输入框前缀-地图-->
        <template #prefix>
          <a-button type="primary" size="large" style="height: 103%;margin-left: -20%;padding: 15px;"><el-icon><LocationFilled /></el-icon>全国</a-button>
        </template>
      </a-input-search>
    </a-space>
<!--主要内容-->
    <div class="common-layout" style="padding-bottom: 40px;">
      <el-container>
<!--        热门职位按钮-->
        <el-header style="margin-bottom: 20px;">
          <h4>热门职位:  <el-button class="baa1" type="info" size="small" round>Java</el-button>
            <el-button class="baa1" type="info" size="small" round>测试工程师</el-button>
            <el-button class="baa1" type="info" size="small" round>运维工程师</el-button>
            <el-button class="baa1" type="info" size="small" round>网络工程师</el-button>
            <el-button class="baa1" type="info" size="small" round>IT技术支持</el-button>
            <el-button class="baa1" type="info" size="small" round>数据开发</el-button>
          </h4>
        </el-header>
<!--        main-->
        <el-main>
<!--          左卡片-->
          <div class="arco-card arco-card-size-medium arco-card-bordered cl" style="width: 35%;height: 510px;background: linear-gradient(56deg, rgba(34,9,128,0.65), rgb(179,175,241));">
            <div class="job-menu-wrapper">
                  <!--          互联网/AI    -->
                  <a-popover position="right">
                    <el-button class="button" :style="{position: 'absolute',top:'40px',left:'30px',color: 'white',background:'rgba(255,255,255,0.38)',width:'90%'}" link>
                      <b class="FLb">互联网/AI </b>
                      <router-link :to="{ name: 'practiceSearch', query: { q: '互联网' }}" :style="{color:'#410986'}">互联网</router-link> |
                      <router-link :to="{ name: 'practiceSearch', query: { q: '电子商务' }}" :style="{color:'#410986'}">电子商务</router-link> |
                      <router-link :to="{ name: 'practiceSearch', query: { q: '软件' }}" :style="{color:'#410986'}">软件</router-link>
                    </el-button>
                    <template #content>
                      <p>互联网/AI</p>
                      <router-link :to="{ name: 'practiceSearch', query: { q: '互联网' }}">互联网</router-link> |
                      <router-link :to="{ name: 'practiceSearch', query: { q: '软件' }}">软件</router-link> |
                      <router-link :to="{ name: 'practiceSearch', query: { q: '游戏' }}">游戏</router-link> |
                      <router-link :to="{ name: 'practiceSearch', query: { q: '社交网络与媒体' }}">社交网络与媒体</router-link> |
                      <router-link :to="{ name: 'practiceSearch', query: { q: '人工智能' }}">人工智能</router-link> |
                      <router-link :to="{ name: 'practiceSearch', query: { q: '云计算' }}">云计算</router-link> |
                      <router-link :to="{ name: 'practiceSearch', query: { q: '计算机服务' }}">计算机服务</router-link> |
                      <router-link :to="{ name: 'practiceSearch', query: { q: '大数据' }}">大数据</router-link> |
                      <router-link :to="{ name: 'practiceSearch', query: { q: '物联网' }}">物联网</router-link> |
                      <router-link :to="{ name: 'practiceSearch', query: { q: '新零售' }}">新零售</router-link> |
                      <router-link :to="{ name: 'practiceSearch', query: { q: '信息安全' }}">信息安全</router-link>
                    </template>
                  </a-popover>
                  <!--            服务业     -->
                  <a-popover position="right">
                    <el-button class="button" :style="{position: 'absolute',top:'85px',left:'17px',color: 'white',background:'rgba(255,255,255,0.38)',width:'90%'}" link><b class="FLb">服务业</b> |
                      <router-link :to="{ name: 'practiceSearch', query: { q: '餐饮' }}" :style="{color:'#410986'}">餐饮业</router-link> |
                      <router-link :to="{ name: 'practiceSearch', query: { q: '美容' }}" :style="{color:'#410986'}">美容</router-link> |
                      <router-link :to="{ name: 'practiceSearch', query: { q: '美发' }}" :style="{color:'#410986'}">美发</router-link>
                    </el-button>
                    <template #content>
                      <p>服务业</p>
                      <div class="text">
                        <router-link :to="{ name: 'practiceSearch', query: { q: '餐饮' }}">餐饮</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '美容' }}">美容</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '美发' }}">美发</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '酒店/民宿' }}">酒店/民宿</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '休闲/娱乐' }}">休闲/娱乐</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '运动/健身' }}">运动/健身</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '保健/养生' }}">保健/养生</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '家政服务' }}">家政服务</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '旅游/景区' }}">旅游/景区</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '婚庆/摄影' }}">婚庆/摄影</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '宠物服务' }}">宠物服务</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '回收/维修' }}">回收/维修</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '其他生活服务' }}">其他生活服务</router-link>
                      </div>
                    </template>
                  </a-popover>
                  <!--        房地产/建筑    -->
                  <a-popover position="right">
                    <el-button class="button" :style="{position: 'absolute',top:'140px',left:'17px',color: 'white',background:'rgba(255,255,255,0.38)',width:'90%'}" link>
                      <b class="FLb">房地产/建筑</b>
                      <router-link :to="{ name: 'practiceSearch', query: { q: '装修装饰' }}" :style="{color:'#410986'}">装修装饰</router-link> |
                      <router-link :to="{ name: 'practiceSearch', query: { q: '房屋建筑工程' }}" :style="{color:'#410986'}">房屋建筑工程</router-link> |
                      <router-link :to="{ name: 'practiceSearch', query: { q: '土木工程' }}" :style="{color:'#410986'}">土木工程</router-link>
                    </el-button>
                    <template #content>
                      <p>房地产/建筑</p>
                      <div class="text">
                        <router-link :to="{ name: 'practiceSearch', query: { q: '装修装饰' }}">装修装饰</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '房屋建筑工程' }}">房屋建筑工程</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '土木工程' }}">土木工程</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '物业管理' }}">物业管理</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '房地产中介/租赁' }}">房地产中介/租赁</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '建筑材料' }}">建筑材料</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '房地产开发经营' }}">房地产开发经营</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '建筑设计' }}">建筑设计</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '建筑工程咨询服务' }}">建筑工程咨询服务</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '土地与公共设施管理' }}">土地与公共设施管理</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '工程施工' }}">工程施工</router-link>
                      </div>
                    </template>
                  </a-popover>
                  <!--         教育培训   -->
                  <a-popover position="right">
                    <el-button class="button" :style="{position: 'absolute',top:'190px',left:'17px',color: 'white',background:'rgba(255,255,255,0.38)',width:'90%'}" link><b class="FLb">教育培训</b>
                      <router-link :to="{ name: 'practiceSearch', query: { q: '培训/辅导机构' }}" :style="{color:'#410986'}">培训/辅导机构</router-link> |
                      <router-link :to="{ name: 'practiceSearch', query: { q: '职业培训' }}" :style="{color:'#410986'}">职业培训</router-link> |
                      <router-link :to="{ name: 'practiceSearch', query: { q: '学前教育' }}" :style="{color:'#410986'}">学前教育</router-link>
                    </el-button>
                    <template #content>
                      <p>教育培训</p>
                      <div class="text">
                        <router-link :to="{ name: 'practiceSearch', query: { q: '培训/辅导机构' }}">培训/辅导机构</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '职业培训' }}">职业培训</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '学前教育' }}">学前教育</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '学校/学历教育' }}">学校/学历教育</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '学术/科研' }}">学术/科研</router-link>
                      </div>
                    </template>
                  </a-popover>
                  <!--      广告/传媒/文化/体育-->
                  <a-popover position="right">
                    <el-button class="button" :style="{position: 'absolute',top:'246px',left:'17px',color: 'white',background:'rgba(255,255,255,0.38)',width:'90%'}"  link><b class="FLb">广告/传媒/文化/体育</b>
                      <router-link :to="{ name: 'practiceSearch', query: { q: '文化艺术/娱乐' }}" :style="{color:'#410986'}">文化艺术/娱乐</router-link> |
                      <router-link :to="{ name: 'practiceSearch', query: { q: '体育' }}" :style="{color:'#410986'}">体育</router-link> |
                      <router-link :to="{ name: 'practiceSearch', query: { q: '广告/公关/会展' }}" :style="{color:'#410986'}">广告/公关/会展</router-link>
                    </el-button>
                    <template #content>
                      <p>广告/传媒/文化/体育</p>
                      <div class="text">
                        <router-link :to="{ name: 'practiceSearch', query: { q: '文化艺术/娱乐' }}">文化艺术/娱乐</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '体育' }}">体育</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '广告/公关/会展' }}">广告/公关/会展</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '广播/影视' }}">广播/影视</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '新闻/出版' }}">新闻/出版</router-link>
                      </div>
                    </template>
                  </a-popover>
                  <!--         制造业   -->
                  <a-popover position="right">
                    <el-button class="button" :style="{position: 'absolute',top:'295px',left:'17px',color: 'white',background:'rgba(255,255,255,0.38)',width:'90%'}" link><b class="FLb">制造业</b>
                      <router-link :to="{ name: 'practiceSearch', query: { q: '通用设备' }}" :style="{color:'#410986'}">通用设备</router-link> |
                      <router-link :to="{ name: 'practiceSearch', query: { q: '专用设备' }}" :style="{color:'#410986'}">专用设备</router-link> |
                      <router-link :to="{ name: 'practiceSearch', query: { q: '电气机械/器材金属制品' }}" :style="{color:'#410986'}">电气机械/器材金属制品</router-link>
                    </el-button>
                    <template #content>
                      <p>制造业</p>
                      <div class="text">
                        <router-link :to="{ name: 'practiceSearch', query: { q: '通用设备' }}">通用设备</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '专用设备' }}">专用设备</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '电气机械/器材金属制品' }}">电气机械/器材金属制品</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '橡胶/塑料制品' }}">橡胶/塑料制品</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '化学原料/化学制品' }}">化学原料/化学制品</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '仪器仪表' }}">仪器仪表</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '自动化设备' }}">自动化设备</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '印刷/包装/造纸' }}">印刷/包装/造纸</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '铁路/船舶/航空/航天制造' }}">铁路/船舶/航空/航天制造</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '计算机/通信/其他电子设备' }}">计算机/通信/其他电子设备</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '新材料' }}">新材料</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '机械设备/机电/重工仪器' }}">机械设备/机电/重工仪器</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '仪表/工业自动化原材料加工/模具' }}">仪表/工业自动化原材料加工/模具</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '其他制造业' }}">其他制造业</router-link>
                      </div>
                    </template>
                  </a-popover>
                  <!--       专业服务    -->
                  <a-popover position="right">
                    <el-button class="button" :style="{position: 'absolute',top:'345px',left:'17px',color: 'white',background:'rgba(255,255,255,0.38)',width:'90%'}" link><b class="FLb">专业服务</b>
                      <router-link :to="{ name: 'practiceSearch', query: { q: '咨询' }}" :style="{color:'#410986'}">咨询</router-link> |
                      <router-link :to="{ name: 'practiceSearch', query: { q: '财务/审计/税务' }}" :style="{color:'#410986'}">财务/审计/税务</router-link> |
                      <router-link :to="{ name: 'practiceSearch', query: { q: '人力资源服务' }}" :style="{color:'#410986'}">人力资源服务</router-link>
                    </el-button>
                    <template #content>
                      <p>专业服务</p>
                      <div class="text">
                        <router-link :to="{ name: 'practiceSearch', query: { q: '咨询' }}">咨询</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '财务/审计/税务' }}">财务/审计/税务</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '人力资源服务' }}">人力资源服务</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '学校/学历教育' }}">学校/学历教育</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '检测/认证/知识产权' }}">检测/认证/知识产权</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '翻译' }}">翻译</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '其他专业服务' }}">其他专业服务</router-link> |
                      </div>
                    </template>
                  </a-popover>
                  <!--           制药/医疗 -->
                  <a-popover position="right">
                    <el-button class="button" :style="{position: 'absolute',top:'395px',left:'17px',color: 'white',background:'rgba(255,255,255,0.38)',width:'90%'}" link><b class="FLb">制药/医疗</b>
                      <router-link :to="{ name: 'practiceSearch', query: { q: '医疗服务' }}" :style="{color:'#410986'}">医疗服务</router-link> |
                      <router-link :to="{ name: 'practiceSearch', query: { q: '医美服务' }}" :style="{color:'#410986'}">医美服务</router-link> |
                      <router-link :to="{ name: 'practiceSearch', query: { q: '医疗器械' }}" :style="{color:'#410986'}">医疗器械</router-link>
                    </el-button>
                    <template #content>
                      <p>制药/医疗</p>
                      <div class="text">
                        <router-link :to="{ name: 'practiceSearch', query: { q: '医疗服务' }}">医疗服务</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '医美服务' }}">医美服务</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '医疗器械' }}">医疗器械</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: 'IVD' }}">IVD</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '生物/制药' }}">生物/制药</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '医药批发零售' }}">医药批发零售</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '医疗研发外包' }}">医疗研发外包</router-link> |
                      </div>
                    </template>
                  </a-popover>
                  <!--                  金融-->
                  <a-popover position="right">
                    <el-button class="button" :style="{position: 'absolute',top:'445px',left:'17px',color: 'white',background:'rgba(255,255,255,0.38)',width:'90%'}" link><b class="FLb">金融</b>
                      <router-link :to="{ name: 'practiceSearch', query: { q: '互联网金融' }}" :style="{color:'#410986'}">互联网金融</router-link> |
                      <router-link :to="{ name: 'practiceSearch', query: { q: '银行' }}" :style="{color:'#410986'}">银行</router-link> |
                      <router-link :to="{ name: 'practiceSearch', query: { q: '投资/融资 '}}" :style="{color:'#410986'}">投资/融资</router-link>
                    </el-button>
                    <template #content>
                      <p>金融</p>
                      <div class="text">
                        <router-link :to="{ name: 'practiceSearch', query: { q: '互联网金融' }}">互联网金融</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '银行' }}">银行</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '投资/融资 '}}">投资/融资</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '证券/期货' }}">证券/期货</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '基金' }}">基金</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '保险' }}">保险</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '租赁/拍卖/典当/担保' }}">租赁/拍卖/典当/担保</router-link> |
                        <router-link :to="{ name: 'practiceSearch', query: { q: '信托' }}">信托</router-link>
                        <router-link :to="{ name: 'practiceSearch', query: { q: '财富管理' }}">财富管理</router-link>
                        <router-link :to="{ name: 'practiceSearch', query: { q: '其他金融业' }}">其他金融业</router-link>
                      </div>
                    </template>
                  </a-popover>
                </div>
            </div>
          <!--          右卡片-->
          <div class="cr" >
            <a-carousel
                :style="{
      width: '100%',
      height: '100%',
    }"
                :autoPlay="true"
                animation-name="card"
                show-arrow="never"
                direction="vertical"
                indicator-position="top"
            >
              <a-carousel-item>
                <img src="../../assets/img/Index/HB1.png" style="width: 100%;  object-fit:cover;}"/>
              </a-carousel-item>
              <a-carousel-item>
                <img src="../../assets/img/Index/HB2.png" style="width: 100%;  object-fit:cover;}"/>
              </a-carousel-item>
              <a-carousel-item>
                <img src="../../assets/img/Index/HB3.png" style="width: 100%;  object-fit:cover;}"/>
              </a-carousel-item>
              <a-carousel-item>
                <img src="../../assets/img/Index/HB4.png" style="width: 100%;  object-fit:cover;}"/>
              </a-carousel-item>
              <a-carousel-item>
                <img src="../../assets/img/Index/HB5.png" style="width: 100%;  object-fit:cover;}"/>
              </a-carousel-item>
            </a-carousel>
          </div>
<!--          第二层 热招职位-->
          <h1>热招职位</h1>
          <div class="layer">
            <el-tabs :key=1 size="large" style="margin-top: -2%; margin-left: 10px"  >
              <el-tab-pane v-for="r in rList" :label="r.name" >
                <a-row class="grid-demo" v-if="r.id==1">
                  <a-col :span="8" v-for="job in jobs.slice(0,9)" >
                    <a @click="goToJobDetail(job.id)">
                    <a-card :style="{ width: '90%' }" :title="job.titleName" hoverable style="height:140px;border-radius: 10px;margin:2% 0 0 5%" >
                      <template #extra>
                        <h4>{{job.salary}}</h4>
                      </template>
                      {{ job.recruitmentCity }} <br />
                      {{ job.educationalRequirements }}
                      <a-divider dashed />
                      <span :style="{ display: 'flex', alignItems: 'center', color: '#1D2129'}" style="margin-top: 10px">
        <a-avatar :size="30">
      <img alt="avatar"
          :src="job.coverPhoto"
      />
    </a-avatar>
        <a-typography-text style="font-weight: bold;color: #612e94;margin-left: 5px">{{job.corporateName}}</a-typography-text>
      </span>
                    </a-card>
                    </a>
                  </a-col>
                </a-row>
                <a-row class="grid-demo" v-if="r.id==2">
                  <a-col :span="8" v-for="job in CMjobs">
                    <a href="#">
                      <a-card :style="{ width: '90%' }" :title="job.titleName" hoverable style="height:140px;border-radius: 10px;margin:2% 0 0 5%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap">
                        <template #extra>
                          <h4>{{job.salary}}</h4>
                        </template>
                        {{ job.recruitmentCity }} <br />
                        {{ job.educationalRequirements }}
                        <a-divider dashed />
                        <span :style="{ display: 'flex', alignItems: 'center', color: '#1D2129'}" style="margin-top: 10px">
        <a-avatar :size="30">
      <img alt="avatar"
           :src="job.coverPhoto"
      />
    </a-avatar>
        <a-typography-text style="font-weight: bold;color: #612e94;margin-left: 5px">{{job.corporateName}}</a-typography-text>
      </span>
                      </a-card>
                    </a>
                  </a-col>
                </a-row>
                <a-row class="grid-demo" v-if="r.id==3">
                  <a-col :span="8" v-for="job in YLJKjobs">
                    <a href="#">
                      <a-card :style="{ width: '90%' }" :title="job.titleName" hoverable style="height:140px;border-radius: 10px;margin:2% 0 0 5%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap">
                        <template #extra>
                          <h4>{{job.salary}}</h4>
                        </template>
                        {{ job.recruitmentCity }} <br />
                        {{ job.educationalRequirements }}
                        <a-divider dashed />
                        <span :style="{ display: 'flex', alignItems: 'center', color: '#1D2129'}" style="margin-top: 10px">
        <a-avatar :size="30">
      <img alt="avatar"
           :src="job.coverPhoto"
      />
    </a-avatar>
        <a-typography-text style="font-weight: bold;color: #612e94;margin-left: 5px">{{job.corporateName}}</a-typography-text>
      </span>
                      </a-card>
                    </a>
                  </a-col>
                </a-row>
                <a-row class="grid-demo" v-if="r.id==4">
                  <a-col :span="8" v-for="job in JRjobs">
                    <a href="#">
                      <a-card :style="{ width: '90%' }" :title="job.titleName" hoverable style="height:140px;border-radius: 10px;margin:2% 0 0 5%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap">
                        <template #extra>
                          <h4>{{job.salary}}</h4>
                        </template>
                        {{ job.recruitmentCity }} <br />
                        {{ job.educationalRequirements }}
                        <a-divider dashed />
                        <span :style="{ display: 'flex', alignItems: 'center', color: '#1D2129'}" style="margin-top: 10px">
        <a-avatar :size="30">
      <img alt="avatar"
           :src="job.coverPhoto"
      />
    </a-avatar>
        <a-typography-text style="font-weight: bold;color: #612e94;margin-left: 5px">{{job.corporateName}}</a-typography-text>
      </span>
                      </a-card>
                    </a>
                  </a-col>
                </a-row>
                <a-row class="grid-demo" v-if="r.id==5">
                  <a-col :span="8" v-for="job in JYjobs">
                    <a href="#">
                      <a-card :style="{ width: '90%' }" :title="job.titleName" hoverable style="height:140px;border-radius: 10px;margin:2% 0 0 5%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap">
                        <template #extra>
                          <h4>{{job.salary}}</h4>
                        </template>
                        {{ job.recruitmentCity }} <br />
                        {{ job.educationalRequirements }}
                        <a-divider dashed />
                        <span :style="{ display: 'flex', alignItems: 'center', color: '#1D2129'}" style="margin-top: 10px">
        <a-avatar :size="30">
      <img alt="avatar"
           :src="job.coverPhoto"
      />
    </a-avatar>
        <a-typography-text style="font-weight: bold;color: #612e94;margin-left: 5px">{{job.corporateName}}</a-typography-text>
      </span>
                      </a-card>
                    </a>
                  </a-col>
                </a-row>
              </el-tab-pane>
            </el-tabs>
          </div>
          <a-button type="primary" shape="round" @click="Turn()" class="baa1 baa" style="width: 140px;height:40px;margin: 1% 0 0 45%">查看更多</a-button>
<!--第三层 热门企业-->
          <h1>热门企业</h1>
          <div class="layer">
                <!--               标签页开始-->
                <a-row class="grid-demo">
                  <a-col :span="8" v-for="(jobOfCompany,index) in jobsOfCompany.slice(0,9)" :key="index+1">
                    <!--                    卡片-->
                    <a href="#">
                      <a-card :style="{ width: '90%' }" :title="jobOfCompany.corporateName" hoverable style="height:320px;border-radius: 10px;margin:2% 0 0 5%">
<!--                        公司头像-->
                        <template #extra>
                          <a-avatar :size="30">
                            <img alt="avatar"
                                 :src="jobOfCompany.coverPhoto"
                            />
                          </a-avatar>
                        </template>
                        <div style="width: 100%;height: 70%">
                          <a-list size="small">
<!--                            岗位列表-->
                            <a-list-item v-for="(jobs,index) in jobOfCompany.jobs.slice(0,3)" style="height: 80%" >
                              <h4>{{ jobs.titleName }} <a-button type="text" style="float: right;margin-right: 10px"><el-icon><ChatDotSquare /></el-icon></a-button></h4>
                              <p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 90%">{{ jobs.jobDetail }}</p>
                            </a-list-item>
                          </a-list>
                          
                        </div>
                        <div style="height: 10%;width: 100%;margin-top: 5%">
                        <!--                        底部按钮-->
                        <a-button @click="goToCompanyDetail(jobOfCompany.id)"  type="outline" style="display:block;margin:0 auto">查看更多职位</a-button>
                        </div>
                      </a-card>
                    </a>
                    <!--                    卡片结束-->
                  </a-col>
                </a-row>
                <!--               标签页结束-->

          </div>
          <a-button type="primary" @click="Turn2()" shape="round"  class="baa1 baa" style="width: 140px;height:40px;margin: 1% 0 3% 45%">查看更多</a-button>
          <!--          第四层 城市热招-->
          <h1 style="margin-bottom: 30px;">城市热招</h1>
          <a-row class="grid-demo">
            <a-col :span="4" v-for="(a,index) in CSarr" :key="index+1" style="height: 150px;width: 100%;margin-top: 5px;margin-bottom: 10px;">
<!--城市卡片-->
              <router-link :to="{ name: 'practiceSearch', query: { q: a.name }}">
                <a-image
                    :src='a.url'
                    :title='a.name'
                    width="99%"
                    height="100%"
                    :preview="false"
                    style="vertical-align: top;border-radius: 10px;"
                >
                </a-image>
              </router-link>
            </a-col>
          </a-row>

        </el-main>
      </el-container>
    </div>

  </div>
</template>


<script setup>
import {useRouter} from 'vue-router'
import {onMounted, ref} from "vue";
import {ChatDotSquare} from "@element-plus/icons-vue";
import axios from "axios";
import {message} from "ant-design-vue";
import {ElMessage} from "element-plus";

const Turn = ()=>{
  window.open('http://localhost:9090/practiceSearch', '_blank');
}
const goToCompanyDetail = (id)=>{
  window.open('http://localhost:9090/CompanyDetail?id='+id, '_blank');
}
const Turn2 = ()=>{
  window.open('http://localhost:9090/Csearch', '_blank');
}
const user = ref(getUser());
//定义数组保存输入框数据
const input=ref('');
// 获取router实例
const router = useRouter();
/*热招职位分类列表*/
const rList = ref([
  {id: '2',name:'传媒'},
  {id: '3',name:'医疗健康'},
  {id: '1',name:'IT行业'},
  {id: '4',name:'金融'},
  {id: '5',name:'教育'},
])
/*热门城市列表*/
const CSarr =ref([
  {id:1,name:'北京',url:'https://img1.qunarzz.com/travel/d8/1704/3d/edfa46d0ad0e39b5.jpg'},
  {id:2,name:'重庆',url:'https://ts1.cn.mm.bing.net/th/id/R-C.c4df238c50dff913bac372642b24768d?rik=UKYMpqMca%2f1hog&riu=http%3a%2f%2fwww.cqzyx.net%2fu%2fcms%2fzyx%2f201812%2f11124338iwy7.jpg&ehk=lF8LVYHJyPE1piBWrfH9irCK4cZc0TqeMMnHWIzjtGI%3d&risl=&pid=ImgRaw&r=0'},
  {id:3,name:'上海',url:'https://img.zcool.cn/community/01122857b088a10000018c1b1a85a9.jpg@2o.jpg'},
  {id:4,name:'香港',url:'https://img.zcool.cn/community/0144a95d4d8f57a80120695c1b65f2.jpg@1280w_1l_2o_100sh.jpg'},
  {id:5,name:'昆明',url:'https://flight-feed.qunarzz.com/as3/180/image/poi_vishnu/8db453b2-9c63-4434-97f7-39bab6bace64.jpg'},
  {id:6,name:'济南',url:'https://img.zcool.cn/community/01d10a5d493cd6a80120695c821ec9.jpg@1280w_1l_2o_100sh.jpg'},
  {id:7,name:'佛山',url:'https://ts1.cn.mm.bing.net/th/id/R-C.c826db7e53eb3b461ee97302a6a5ccc1?rik=AVi8OVp3%2fyFDuQ&riu=http%3a%2f%2fnews.southcn.com%2fgd%2fcontent%2fattachment%2f20210315%2f5dafa2f71074495fba305b7b336e3cb4.jpg&ehk=zWujP20GjIcpPVH30M9OZRqqT6VmUurb4znze3HtI%2bQ%3d&risl=&pid=ImgRaw&r=0'},
  {id:8,name:'深圳',url:'https://youimg1.c-ctrip.com/target/0101p1200056xzz4z5A0E_D_10000_1200.jpg?proc=autoorient'},
  {id:9,name:'广州',url:'https://www.cantontower.com/res/dist/images/newsimg03.jpg'},
  {id:10,name:'合肥',url:'https://img.zcool.cn/community/011a515d450228a8012187f41b34e2.jpg@2o.jpg'},
  {id:11,name:'西安',url:'https://ts1.cn.mm.bing.net/th/id/R-C.3a7d674ea4453f1f4bc35d817815fd3d?rik=Iou%2bie5Rez%2bCtA&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50083%2f8813.jpg_wh1200.jpg&ehk=%2bj64XbBvW1TXgYbppTmGESfbaU2JzR0aZ0GIohV7g0o%3d&risl=&pid=ImgRaw&r=0'},
  {id:12,name:'苏州',url:'https://img.zcool.cn/community/01f7e75d6e6caba801202f170bbd2b.jpg%401280w_1l_2o_100sh.jpg'}
])
const JYjobs = ref([
    {salary:'6-8K',titleName:'金融证券实习生',recruitmentCity:'上海',educationalRequirements:'投资咨询/理财规划证券从业资格市场营销相关学历',corporateName:'益盟股份',coverPhoto:'https://img.51miz.com/Element/00/81/29/18/21f4ca05_E812918_ede58726.png'},
    {salary:'15-19K',titleName:'金融实习生',recruitmentCity:'广州',educationalRequirements:'可接受实习生！应届生！',corporateName:'中恒',coverPhoto:'https://img.zcool.cn/community/014f105b0622e2a801218cf400298e.jpg@3000w_1l_0o_100sh.jpg'},
    {salary:'4-8K',titleName:'金融信贷员',recruitmentCity:'深圳',educationalRequirements:'2022、2023、2024届本科毕业生',corporateName:'杭银消金',coverPhoto:'https://www.logo9.net/userfiles/images/1112z4.jpg'},
    {salary:'15-19K',titleName:'证券金融实习生',recruitmentCity:'云南',educationalRequirements:'为客户提供专业知识解析与产品介绍；',corporateName:'云南约牛证券投资咨询',coverPhoto:'https://img.zcool.cn/community/01270a56d7bffa6ac7252ce6977a99.jpg@2o.jpg'},
    {salary:'4-8K',titleName:'金融信贷专员',recruitmentCity:'曲靖',educationalRequirements:'维护客户关系，公司提供优质资源开发新客户',corporateName:'曲靖智谱华章科技有限公司',coverPhoto:'https://img.zcool.cn/community/01c16e5d270aa6a801214837e3b2f9.png@2o.png'},
  {salary: '6-8K',titleName:'金融证券实习生',recruitmentCity:'上海',educationalRequirements:'投资咨询/理财规划证券从业资格金融/经济/市场营销相关学历',corporateName:'益盟股份',coverPhoto:'https://img.zcool.cn/community/011a515d450228a8012187f41b34e2.jpg@2o.jpg'},
  {salary: '15-19K',titleName:'金融实习生',recruitmentCity:'广州',educationalRequirements:'可接受实习生！应届生！',corporateName:'中恒',coverPhoto:'https://www.logo9.net/userfiles/images/9shikumen1.jpg'},
  {salary: '4-8K',titleName:'金融信贷员',recruitmentCity:'深圳',educationalRequirements:'2022、2023、2024届本科毕业生',corporateName:'杭银消金',coverPhoto:'https://img.51miz.com/Element/00/95/06/96/03abcb7d_E950696_a4e980ca.png'},
  {salary: '15-19K',titleName:'证券金融实习生',recruitmentCity:'云南',educationalRequirements:'给客户提供合适的软件咨询服务',corporateName:'云南约牛证券投资咨询',coverPhoto:'https://ts1.cn.mm.bing.net/th/id/R-C.416954e5654dd20a5bc92d3156972039?rik=rcgHNENtgf1rmg&riu=http%3a%2f%2fpic.ntimg.cn%2ffile%2f20181021%2f7090656_085935856088_2.jpg&ehk=Tg%2fPZbL242oaX5gkauD%2fiD1OtXpLA878kSUwQKTtzLU%3d&risl=&pid=ImgRaw&r=0'}
])
const JRjobs = ref([
    {salary:'6-8K',titleName:'金融证券实习生',recruitmentCity:'上海',educationalRequirements:'投资咨询/理财规划证券从业资格金融/经济/市场营销相关学历',corporateName:'益盟股份',coverPhoto:'https://img.zcool.cn/community/011a515d450228a8012187f41b34e2.jpg@2o.jpg'},
    {salary:'15-19K',titleName:'金融实习生',recruitmentCity:'广州',educationalRequirements:'可接受实习生！应届生！',corporateName:'中恒',coverPhoto:'https://www.logo9.net/userfiles/images/9shikumen1.jpg'},
    {salary:'4-8K',titleName:'金融信贷员',recruitmentCity:'深圳',educationalRequirements:'2022、2023、2024届本科毕业生；金融、经济、工商管理类专业优先，其他专业不限。',corporateName:'杭银消金',coverPhoto:'https://www.logo9.net/userfiles/images/1112z4.jpg'},
    {salary:'15-19K',titleName:'证券金融实习生',recruitmentCity:'云南',educationalRequirements:'给客户提供合适的软件咨询服务，定期发送股市资讯，为客户提供专业知识解析与产品介绍；',corporateName:'云南约牛证券投资咨询',coverPhoto:'https://www.logo9.net/userfiles/images/9shikumen1.jpg'},
    {salary:'4-8K',titleName:'金融信贷专员',recruitmentCity:'曲靖',educationalRequirements:'维护客户关系，公司提供优质资源开发新客户',corporateName:'曲靖智谱华章科技有限公司',coverPhoto:'https://tse1-mm.cn.bing.net/th/id/OIP-C.h0IBZs64qZwjv6w26r2O7gHaFj?rs=1&pid=ImgDetMain'},
    {salary:'5-9K',titleName:'金融信贷专员',recruitmentCity:'南京',educationalRequirements:'本科',corporateName:'南京智谱华章科技有限公司',coverPhoto:'https://tse4-mm.cn.bing.net/th/id/OIF-C.38PFN4zKtP4Ly8xCvlI8KQ?rs=1&pid=ImgDetMain'},
  {salary:'14-18K',titleName:'金融贷款专员',recruitmentCity:'武汉',educationalRequirements:'为各大企业主提供企业备用金做贷款销售，可评估测额成功后便直接提成',corporateName:'武汉智谱华章科技有限公司',coverPhoto:'https://tse2-mm.cn.bing.net/th/id/OIF-C.zI8kgTXOdSlGyHxg86PCng?rs=1&pid=ImgDetMain'},
  {salary:'15-19K',titleName:'金融信贷专员',recruitmentCity:'成都',educationalRequirements:'项目投资、基金、股票、期货、外汇、票据等投资。',corporateName:'成都智谱华章科技有限公司',coverPhoto:'https://tse2-mm.cn.bing.net/th/id/OIF-C.pjaUqGF3VygPunl8iYXioQ?rs=1&pid=ImgDetMain'},
    {salary:'4-8K',titleName:'金融专员',recruitmentCity:'西安',educationalRequirements:'本科',corporateName:'西安智谱华章科技有限公司',coverPhoto:'https://img95.699pic.com/xsj/06/9t/aw.jpg!/fw/700/watermark/url/L3hzai93YXRlcl9kZXRhaWwyLnBuZw/align/southeast'}
])
const YLJKjobs = ref([
    {salary:'4-8K',titleName:'医疗QA',recruitmentCity:'无锡',educationalRequirements:'全职临床医学相关专业医药科研经验中医药相关专业',corporateName:'澳鹏科技',coverPhoto:'https://www.logo9.net/userfiles/images/932z4.jpg'},
    {salary:'5-9K',titleName:'医疗健康顾问',recruitmentCity:'唐山',educationalRequirements:'负责与客户进行有效沟通，根据用户需求提供咨询服务',corporateName:'唐山贺康生物科技',coverPhoto:'https://ts1.cn.mm.bing.net/th/id/R-C.5fe537351c677b6c3f3ed6eac4cf37bd?rik=pF1x2NkI47ko3Q&riu=http%3a%2f%2fpic42.photophoto.cn%2f20170307%2f0007019937916798_b.jpg&ehk=bXLdonW%2bDptV20oCF5QE%2bFVNpdeoJKiUgU2YQ5e21zI%3d&risl=&pid=ImgRaw&r=0'},
    {salary:'4-8K',titleName:'医药代表',recruitmentCity:'北京',educationalRequirements:'医药代表，医药代表助理，医药代表实习生',corporateName:'北京康辉医药',coverPhoto:'https://ts1.cn.mm.bing.net/th/id/R-C.daf696c1d38535e68f091b2987cca5ce?rik=f1YhNJdaoCwtJA&riu=http%3a%2f%2fwww.kuaipng.com%2fUploads%2fpic%2fw%2f2023%2f05-29%2f141126%2fwater_141126_698_698_.png&ehk=r61QSvQwbcM7dFzJIp8ZYJegubJ5peLwfTnN%2fp%2bdKes%3d&risl=&pid=ImgRaw&r=0'},
    {salary:'40-60K.20薪',titleName:'医疗健康（融资专家）',recruitmentCity:'无锡',educationalRequirements:'负责医疗健康部门项目承揽对标县域医院大健康产业等',corporateName:'猎头公司',coverPhoto:'https://pic.nximg.cn/file/20220803/13002233_112710589105_2.jpg'},
    {salary:'180-260K',titleName:'首席运营官COO（医疗）',recruitmentCity:'北京',educationalRequirements:'依据战略目标和产品规划制定和拆解运营目标，建立运营策略和打法；',corporateName:'新仕佳',coverPhoto:'https://ts1.cn.mm.bing.net/th/id/R-C.8d3bbe02afa51401d6b773fa239312a8?rik=GZhpEtHA4sM76g&riu=http%3a%2f%2fbdcdn.4aqq.com%2fsetupdir%2fupload%2f200709%2f2007930153359992.gif&ehk=UeEZyMZBgjAvI07Zpu3GTNXIbnCVuGfhNZl0dmCpN30%3d&risl=&pid=ImgRaw&r=0'},
    {salary:'16-38K',titleName:'产品经理-医疗大健康',recruitmentCity:'深圳',educationalRequirements:'责与公司市场、研发等各职能部门密切配合，确保需求与产品规划',corporateName:'臻鼎',coverPhoto:'https://tse3-mm.cn.bing.net/th/id/OIP-C.tF3FPHjo2uREf2D71LJyggHaE8?pid=ImgDet&w=474&h=316&rs=1'},
    {salary:'10-15K.15薪',titleName:'医疗器械销售（常州）',recruitmentCity:'常州',educationalRequirements:'负责接待睡眠呼吸相关疾病客户并完成产品销售',corporateName:'南京松上科技',coverPhoto:'https://logo9.net/userfiles/images/844z4.jpg'},
    {salary:'7-10K',titleName:'健康档案管理专员',recruitmentCity:'昆明',educationalRequirements:'做健康问卷，为其制定个性化的服务方案，完成领导安排的工作任务',corporateName:'昆明市滇池旅游度.',coverPhoto:'https://ts1.cn.mm.bing.net/th/id/R-C.421fb106722f3882c9f09650b281473f?rik=jMNRmW%2blXdjDvg&riu=http%3a%2f%2fwww.kuaipng.com%2fUploads%2fpic%2fw%2f2023%2f05-12%2f140009%2fwater_140009_698_698_.png&ehk=XSQ7SDsl6rJCOzDjsbIOvvuGhTv0HbPZTrD6u4yUTzM%3d&risl=&pid=ImgRaw&r=0'},
    {salary:'8-15K',titleName:'医疗市场专员',recruitmentCity:'沧州',educationalRequirements:'义诊，患者宣教，患者转化',corporateName:'沧州爱眼医院',coverPhoto:'https://www.logo9.net/userfiles/images/1107z4.jpg'}
    ])
const CMjobs = ref([
    {salary:'3-6K',titleName:'抖音短视频搭戏演员',recruitmentCity:'昆明',educationalRequirements:'年龄20-25岁,每天工作4小时.',corporateName:'昆明和鸣文化传媒',coverPhoto:'https://ts1.cn.mm.bing.net/th/id/R-C.a945d677a41c2b3796dba130bb5aacd7?rik=vtJAhDZZ0LSp3A&riu=http%3a%2f%2fwww.sailmet.com%2fContent%2fImages%2fnews%2f106680dd0733467d8a245ad22de39f24.jpg&ehk=el8OJWiifT2KPnamcXpfmoWiAq3DDxfTT%2buC%2faBueGA%3d&risl=&pid=ImgRaw&r=0'},
  {salary:'6-11K',titleName:'传媒接待',recruitmentCity:'上海',educationalRequirements:'引客，接待，商务演出，商务接待，前台接待。',corporateName:'上海旋风传媒',coverPhoto:'https://ts1.cn.mm.bing.net/th/id/R-C.f3c1fb7fd9b5a33e7e5f84f146028b1f?rik=k0V3f%2ffONG6oxQ&riu=http%3a%2f%2fwww.adxo.cn%2fuploadfile%2fimage%2f20180908%2f20180908184055_27281.png&ehk=tG%2biUxTXLDArbmHoCAPbasDX9%2fhzYGNBzi7%2bVWJgG9c%3d&risl=&pid=ImgRaw&r=0'},
  {salary:'4-10K',titleName:'新媒体直播助理',recruitmentCity:'北京',educationalRequirements:'专业，学历不限，无经验也没事哟会有专业的老师给你培训',corporateName:'红尘传媒',coverPhoto:'https://tse1-mm.cn.bing.net/th/id/OIP-C.wnLqzXdmN5It50q0_BQsngHaEp?pid=ImgDet&w=474&h=297&rs=1'},
  {salary:'3-6K',titleName:'网红经纪人',recruitmentCity:'南京',educationalRequirements:'负责签约艺人和代理艺人的推荐、推广和管理，处理演艺经纪事务',corporateName:'昆明艾瑞丝教育',coverPhoto:'https://img.zcool.cn/community/017950596b0555a8012193a3cb5f67.jpg@1280w_1l_2o_100sh.jpg'},
  {salary:'3-8K',titleName:'新媒体运营/小红书运营',recruitmentCity:'杭州',educationalRequirements:'参与公司新媒体栏目内容（小红书、抖音、微信等平台为主）',corporateName:'理想绘',coverPhoto:'https://tse4-mm.cn.bing.net/th/id/OIP-C.cxUCaQa1H0Kqksh_1fLVegHaHa?pid=ImgDet&w=474&h=474&rs=1'},
  {salary:'3-7K',titleName:'传媒公司前台',recruitmentCity:'杭州',educationalRequirements:'工作内容简单易上手',corporateName:'杭州够娱文化传媒',coverPhoto:'https://upload.omooo.com/201611/18/15-00-21-19-4427.jpg'},
  {salary:'200每天',titleName:'天津“无忧传媒”轮岗应届生',recruitmentCity:'天津',educationalRequirements:'人事招聘岗/运营管理岗/人像摄影岗/镜前形象岗/妆造特效岗',corporateName:'塞雅文化',coverPhoto:'https://ts1.cn.mm.bing.net/th/id/R-C.38f2d8da6c71ed30b594115d474a9bfa?rik=oufK1L9X1NS2pQ&riu=http%3a%2f%2fimage.nbd.com.cn%2fuploads%2farticles%2fimages%2f1252672%2fimage003.jpg&ehk=eDVHmOHor9bZrTPRw5nZamWYhY3XHqOeWayu%2fpOUMbM%3d&risl=&pid=ImgRaw&r=0'},
  {salary:'3-6K',titleName:'传媒央媒采访前期',recruitmentCity:'黑龙江',educationalRequirements:'负责栏目的选题策划，挖掘有价值的采访内容。',corporateName:'黑龙江盈禧文化发展',coverPhoto:'https://www.logo9.net/userfiles/images/936r5.jpg'},
  {salary:'3-6K',titleName:'影视传媒顾问',recruitmentCity:'苏州',educationalRequirements:'利用公司提供的销售平台及客户资源信息，实现销售目标',corporateName:'烈火视觉',coverPhoto:'https://tse3-mm.cn.bing.net/th/id/OIP-C.K_pQewCpspxb_Nfp39y5oQAAAA?rs=1&pid=ImgDetMain'}
])
const jobs = ref([])

const goToJobDetail = (id)=>{
  if(user.value == null){
    ElMessage.warning("请先注册登录！");
  }else{
    router.push({ path: 'JobDetail', query: { id:id } });
  }
}

// 获取岗位信息
const loadJobsData = () =>{
  axios.get(BASE_URL + '/v1/index/getAllJobs').then((res)=>{
    if (res.data.code === 2000) {
      console.log("所有的jobs == " + res.data.data)
      jobs.value = res.data.data;
      for (const element of jobs.value) {
        if (element.educationalRequirements === '10') {
          element.educationalRequirements = '大专';
        } else if (element.educationalRequirements === '20') {
          element.educationalRequirements = '本科';
        } else if (element.educationalRequirements === '30') {
          element.educationalRequirements = '研究生';
        }
      }
    } else {
      message.error("加载失败" + res.data.msg)
    }
  })
}

// 获取公司信息
const jobsOfCompany = ref([])
const loadJobsOfCompanyData = () =>{
  axios.get(BASE_URL + '/v1/index/getAllJobsOfCompany').then((res)=>{
    if (res.data.code === 2000) {
      console.log( res.data.data)
      jobsOfCompany.value = res.data.data;
    } else {
      message.error("加载失败" + res.data.msg)
    }
  })
}
const type = ref('1')
onMounted(()=>{
  type.value = '1';
  console.log(type.value)
  loadJobsData();
  loadJobsOfCompanyData();
})

</script>

<script>
export default {
  methods: {
    goToPage(event) {
      const searchQuery = event.target.value;
      // 使用路由的name来解析路由，并手动构建查询字符串
      this.$router.push({ path: '/Ssearch', query: { q: searchQuery }});
    }
  },
};
</script>


<style scoped>
*{
  padding: 0;
  margin: 0;
  text-decoration:none;
}
.FLb{
  color: #43119a;
  font-size: 20px;
  font-weight: bold;
  float: left;
  display: block;
  margin-right: 5px;
}

.div{
  width: 100%;
  font-size: 35px;
  font-weight: bold;

}
.el-header{
  width: 100%;
  height: 30px;
  color: #612e94;
  margin-top: 15px;
  text-align: center;
  margin-bottom: 0;
  font-family: Microsoft YaHei;

}
.baa1{
  background: linear-gradient(90deg, rgb(132, 55, 210), rgb(54, 92, 243));/*渐变颜色*/
  margin-left: 3px;
  transition: transform .2s; /* 动画 */
  :deep(.el-button__wrapper) {
    box-shadow: 0 0 5px rgb(108, 66, 149); /* 霓虹边框效果，可以根据需求调整颜色和模糊度 */
    border-radius: 20px; /* 设置圆角半径 */
    cursor: default;
    .el-button__inner {
      cursor: default !important;
    }
  }
}
.baa:hover{
  background: linear-gradient(45deg, #502a8a, #ba7ef6);
  transform: scale(1.1); /* （120% 缩放按钮动态*/
}
.cl {
  display: inline-block;
  margin-left: 6%;
  height: 510px;
  margin-top: 0;
  border-radius: 10px;
}
.cr {
  width: 50%;
  display: inline-block;
  float: right;
  margin-right: 6%;
  height: 510px;
  margin-top: 0;
  border-radius: 10px;
}
.layer{
  margin-top: 3%;
  width: 100%;
}
h1{
  color: #6c4295;
  width: 100%;
  height: 10%;
  margin-top: 60px;
  text-align: center;
  font-size: 35px;
  font-weight: bold;
  font-family: Microsoft YaHei;
}
footer{
  width: 100%;
  height:800px;
  background-color: #666666;
}
</style>

<style scoped lang="less">
.button{
  width: 100px;
  background: transparent;
}
</style>